<template>
  <el-card class="box-card">

    <my-bread level1="权限管理" level2="权限列表"></my-bread>
    <!-- table-->
    <el-table  height ="700px" :data="rightList" style="margin-top: 20px;width: 100%">
      <el-table-column type="index" prop="id" label="#" >
      </el-table-column>
      <el-table-column prop="authName" label="权限名称" >
      </el-table-column>
      <el-table-column prop="path" label="路径">
      </el-table-column>
      <el-table-column prop="level" label="层级">
        <template slot-scope="scope">

          <span v-if ="scope.row.level === '0'">一级</span>
          <span v-else-if ="scope.row.level === '1'">二级</span>
          <span v-else-if ="scope.row.level === '2'">三级</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {

  created () {
    this.queryRightList()
  },
  data () {
    return {
      rightList: []
    }
  },
  methods: {
    async queryRightList () {
      const res = await this.$http.get('rights/list')
      console.log(res)
      const {
        data,
        meta: {status, msg}
      } = res.data
      if (status === 200) {
        this.rightList = data
      }
    }
  }
}
</script>

<style>
</style>
